﻿<template>
    <div class="esProductChannel-container">
        <el-dialog v-model="state.isShowDialog" draggable width="769px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
                        <ele-Edit/>
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px" >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商户价格" prop="merchantSettlementPrice">
                            <el-input-number v-model="state.ruleForm.merchantSettlementPrice" :min="0" :max="9999"
                                             controls-position="right" placeholder="请输入商户价格" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="渠道价格" prop="channelSettlementPrice" >
                            <el-input-number v-model="state.ruleForm.channelSettlementPrice" :min="0" :max="9999"
                                             controls-position="right" placeholder="请输入渠道价格" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="扣量 自" prop="startingQuantity">
                            <el-input-number v-model="state.ruleForm.startingQuantity" :min="0" :max="9999"
                                             controls-position="right" placeholder="请输入扣量起始数量" class="w100"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                        <el-form-item label="后，每" label-width="70px" prop="deductionInterval">
                            <el-input-number v-model="state.ruleForm.deductionInterval" :min="0" :max="20"
                                             controls-position="right" placeholder="请输入扣量间隔数量" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                        <el-form-item label="扣" label-width="10px" prop="deductionNumerator">
                            <el-input-number v-model="state.ruleForm.deductionNumerator"
                                             :min="(state.ruleForm.deductionInterval || 0)*-1"
                                             :max="state.ruleForm.deductionInterval"
                                             controls-position="right" placeholder="请输入扣量间隔数量" class="w60"/>
                            <el-text class="w40" type="success" style="text-align: right; ">
                                ≈
                                {{
                                    state.ruleForm.deductionInterval == 0 ? 0 : ((Math.abs(state.ruleForm?.deductionNumerator || 0) / (state.ruleForm?.deductionInterval || 1) * 1.0) * 100.00).toFixed(0)
                                }}%
                            </el-text>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="同品排序" prop="categoryIndex">
                            <el-input-number v-model="state.ruleForm.productCategoryIndex" :min="0" :max="99"
                                             controls-position="right" placeholder="同品排序" class="w100" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="配置状态" prop="status">
                            <el-select v-model="state.ruleForm.status" placeholder="请选择" class="w100">
                                <el-option label="启用" :value="1"></el-option>
                                <el-option label="停用" :value="2" :disabled="true"></el-option>
                                <el-option label="到量" :value="3"></el-option>
                                <el-option label="短期关停" :value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="APP黑单">
                            <el-radio-group v-model="state.ruleForm.blackApp" class="ml-4">
                                <el-radio
                                    v-for="item in optionDict.YesNoDict"
                                    :key="item.value"
                                    :label="item.value"
                                >
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="业务互斥">
                            <el-radio-group v-model="state.ruleForm.isMutex" class="ml-4">
                                <el-radio
                                    v-for="item in optionDict.YesNoDict"
                                    :key="item.value"
                                    :label="item.value"
                                >
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editBatchEsProductChannel">

import {reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import mittBus from '/@/utils/mitt';

import {EsProductChannel} from '/@/api/models';
import SysEsProductChannelApi from '/@/api/exocytosis/productChannel';
import {optionDict} from "/@/const/dict";

// 定义变量内容
const props = defineProps({
    title: String,
});

const ruleFormRef = ref();
const state = reactive({
    isShowDialog: false,
    ruleForm: {} as EsProductChannel,
    batchAggregation: [] as string[],
});

// 打开弹窗
const openDialog = async (list: EsProductChannel[]) => {
    state.batchAggregation = list.map(item => item.id);
    state.ruleForm = {
        merchantSettlementPrice: undefined,
        channelSettlementPrice: undefined,
        startingQuantity: undefined,
        deductionInterval: undefined,
        deductionNumerator: undefined,
        productCategoryIndex: undefined,
        status: undefined,
    };
    state.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
    mittBus.emit('submitRefresh');
    state.isShowDialog = false;
};

// 取消
const cancel = () => {
    state.isShowDialog = false;
};

// 提交
const submit = async () => {
    if (state.batchAggregation.length > 0) {
        // 参数处理（自动过滤空值）
        const params = {
            ...state.ruleForm,
            Ids: state.batchAggregation || undefined // 自动转换空字符串
        };
        let res = await SysEsProductChannelApi().batchEditPost(params);
        if (res.data.resCode != '0000')
            ElMessage.error(res.data.resMessage);
        else {
            ElMessage.success("操作成功");
            closeDialog();
        }
    } else {
        ElMessage.success("无选择的数据");
        closeDialog();
    }
};


// 导出对象 将属性或者函数暴露给父组件
defineExpose({openDialog});
</script>
